<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min-2.6.11.js"></script>
</head>
<body>
    <div id="app">

        <!-- 
            过滤器 在 HTML视图中的 表达式 （占位表达式）
            msgFormat('都是') 占位方法
            方法的 实现 script 标签中实现 msgFormat('都是') 方法
         -->

         <!-- 过滤器方法传递 一个参数 -->
        <h3>1 {{ msg | msgFormat('全都') }}</h3>

        <!-- 过滤器方法传递 两个参数 -->
        <h3>2 {{ msg | msgFormat('全都', '----分隔----') }}</h3>

        <!-- 使用 两个过滤器 过滤数据 -->
        <h3>3 {{ msg | msgFormat('全都') | endTest}}</h3>


        <!-- 使用 app 的私有过滤器 -->
        <h3>4 {{ msg | appMsgFormat }}</h3>
    </div>

    <!-- Vue 实例二 控制 -->
    <div id="app2">
        <h3>{{ msg | msgFormat('**') }}</h3>

        <!-- 私有 过滤器只能 提供给 自己控制的 DOM 元素使用 -->
        <!-- <h3>4 {{ msg | appMsgFormat }}</h3> -->
    </div>
    <script>

        /*
        Vue 全局 静态方法 .filter(参数1, 参数2) 
        参数1： 过滤器名字
        参数2: 过滤器 回调函数
            function (参数A, 参数B...) {}
            参数A: 表示 过滤器 在 HTML 视图中 需要过滤的 变量值
            参数B: HTML 视图中 过滤器方法 传入的 参数 从 参数B 开始往后排列
            ....
        */ 
        Vue.filter('msgFormat', function (value, arg, arg2='') {

            /*
            .replace(参数1， 参数2) 字符串内容替换方法
            参数1： 可以为 正则表达式， 正则表达式匹配的内容 会被 参数2 替换
            参数2： 替换参数1 匹配出来的内容
            */ 
            const str = value.replace(/无一/g, arg + arg2)            
            // console.log(str);

            /*
                return 过滤完成 的数据 返回到界面， 并更新界面进行展示
            */ 
            return str
        })

        Vue.filter('endTest', function (msg) {
            // console.log(msg);
            return msg + '《江海余生》'
        })


        const vm = new Vue({
            el:'#app', 
            data: {
                msg: '山河远阔，人间烟火，无一是你，无一不是你！'
            },
            methods: {
                
            },
            // 私有过滤器 
            filters: {
                // 私有 过滤器只能 提供给 自己控制的 DOM 元素使用
                appMsgFormat(value) {
                    console.log('私有 过滤器');
                    console.log(value);
                    return value + '\t--《江海共余生》'
                }
            }
        })

        const vm2 = new Vue({
            el:'#app2', 
            data: {
                msg: '无一》》》学而时习之，不亦说乎？ 无一，'
            },
            methods: {
                
            }
        })

        /*
        全局过滤器：
            Vue 全局 静态方法 .filter(参数1, 参数2) 
        
        私有过滤器：
            是 Vue实例 的  filters 属性中的 方法
            filters 是 Vue构造函数的 实例属性
            filters: {
                过滤器名字(value) {
                    过滤操作
                }
            }

        私有过滤器 仅供 当前实例控制的 DOM 节点使用
        私有过滤器的权重比 全局过滤器的权重要高
        */ 
    </script>
</body>
</html>